<template>
  <div class="detail">
      <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
      </transition>


    <!-- 图片区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <img :src="detail.src" />
      </div>
    </div>

    <!-- 商品名称区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{detail.des}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价:
            <del>￥{{detail.marketPrice}}</del>&nbsp;&nbsp;
            销售价:
            <span class="now_price">￥{{detail.sellPrice}}</span>
          </p>
          <p>
            购买数量:
            <numbox @getcount="getSelectedCount" :max="detail.storage"></numbox>
          </p>
          <p>
            <mt-button size="small" type="primary">立即购买</mt-button>
            <mt-button size="small" type="danger" @click="addToShopCar">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号: {{detail.productNumber}}</p>
          <p>库存情况: {{detail.storage}}</p>
          <p>上架时间: {{detail.time}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button size="large" type="primary" plain @click="goDesc(id)">图文介绍</mt-button>
        <mt-button size="large" type="danger" plain @click="goComment(id)">商品评论</mt-button>
    </div>
    </div>

    
  </div>
</template>
<script>

import numbox from "./GoodsInfo_numbox.vue";
export default {
  data() {
    return {
      detail: {},
      id: this.$route.params.id,
      ballFlag: false,//控制小球隐藏和显示
      selectedCount: 1//保存用户选择的数量
    };
  },
  created() {
    //getDetail11();
    this.getDetail();
    //console.log(this.detail);
  },
  methods: {
    getDetail(){
      this.$axios.get("../../json/goodsinfo.json").then(res => {
      //console.log(res.data);
      //console.log(this.$route.params.id);
      for (let i = 0; i < res.data.length; i++) {
        //console.log(res.data[i]);
        if (res.data[i].id == this.id) {
          this.detail = res.data[i];
          //console.log(this.detail);
          break;
        }
      }
    });
    },
    goDesc(id){
        this.$router.push({name:"GoodsDesc",params:{id}});
    },
    goComment(id){
        this.$router.push({name:"GoodsComment",params:{id}});
    },
    addToShopCar(){
      // console.log(this.id);
      // console.log(this.detail);
        this.ballFlag = !this.ballFlag;
        var goodsinfo = {id:this.id,count:this.selectedCount,price:this.detail.sellPrice,selected: true};
        this.$store.commit("addToCar",goodsinfo);//调用store中的mutations来保存数据
    },
    beforeEnter(el){
        el.style.transform = "translate(0,0)";
    },
    enter(el,done){
        el.offsetWidth;
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        const badgePosition = document.getElementById("badge").getBoundingClientRect();
        const xDist = badgePosition.left - ballPosition.left;
        const yDist = badgePosition.top - ballPosition.top;
        el.style.transform = `translate(${xDist}px,${yDist}px)`;
        el.style.transition = "all 0.5s cubic-bezier(0.4,-0.3, 1, 0.68)";
        done();
    },
    afterEnter(el){
        this.ballFlag = !this.ballFlag;
    },
    getSelectedCount(count){
        this.selectedCount = count;
        //console.log(this.selectedCount);
    }
  },
  components: {
    numbox
  }
};
</script>
<style lang="scss">
.detail {
  background-color: #eee;
  overflow: hidden;
  .ball{
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      z-index: 99;
      top:406px;
      left:142px;
  }
  .mui-card-content {
    img {
      width: 100%;
    }
  }
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer{
      
      background-color: #fff;
      display: block;
      button{
          margin-bottom: 5px;
      }
  }
}
</style>